<template>
  <div>
    <div style="display: inline-block" width="5rem" class="ye">
      <van-sticky>
        <!-- 商品系列列表 -->
        <el-tabs :tab-position="tabPosition">
          <el-tab-pane
            v-for="i in data"
            @tab-click="handleClick"
            :key="i.sid"
            :label="i.title"
          >
            <div class="kuan">
              <div class="containerr">
                <div class="datu">
                  <img
                    src="https://img01.yzcdn.cn/upload_files/2022/02/23/FpoLnWHjXbEkmmqCdP6gjyqm4BAK.jpg!large.webp"
                    alt=""
                  />
                </div>
                <h1>{{ i.title }}</h1>
                <ul class="shop">
                  <li class="tu" @click="$router.push('/productdetails')">
                    <img
                      src="https://img01.yzcdn.cn/upload_files/2022/02/23/Fu2nvut89PSLn8bMlSIqzeuK8SDF.png!middle.webp"
                    />
                    <span>100%系列</span>
                  </li>
                  <li class="tu">
                    <img
                      src="https://img01.yzcdn.cn/upload_files/2022/02/23/Fu2nvut89PSLn8bMlSIqzeuK8SDF.png!middle.webp"
                    />
                    <span>100%系列</span>
                  </li>
                  <li class="tu">
                    <img
                      src="https://img01.yzcdn.cn/upload_files/2022/02/23/Fu2nvut89PSLn8bMlSIqzeuK8SDF.png!middle.webp"
                    />
                    <span>100%系列</span>
                  </li>
                </ul>
                <ul class="shop">
                  <li class="tu">
                    <img
                      src="https://img01.yzcdn.cn/upload_files/2022/02/23/Fu2nvut89PSLn8bMlSIqzeuK8SDF.png!middle.webp"
                    />
                    <span>100%系列</span>
                  </li>
                  <li class="tu">
                    <img
                      src="https://img01.yzcdn.cn/upload_files/2022/02/23/Fu2nvut89PSLn8bMlSIqzeuK8SDF.png!middle.webp"
                    />
                    <span>100%系列</span>
                  </li>
                  <li class="tu">
                    <img
                      src="https://img01.yzcdn.cn/upload_files/2022/02/23/Fu2nvut89PSLn8bMlSIqzeuK8SDF.png!middle.webp"
                    />
                    <span>100%系列</span>
                  </li>
                </ul>
                <ul class="shop">
                  <li class="tu"></li>
                  <li class="tu"></li>
                  <li class="tu"></li>
                </ul>
                <ul class="shop">
                  <li class="tu"></li>
                  <li class="tu"></li>
                  <li class="tu"></li>
                </ul>
                <ul class="shop">
                  <li class="tu"></li>
                  <li class="tu"></li>
                  <li class="tu"></li>
                </ul>
                <ul class="shop">
                  <li class="tu"></li>
                  <li class="tu"></li>
                  <li class="tu"></li>
                </ul>
                <ul class="shop">
                  <li class="tu"></li>
                  <li class="tu"></li>
                  <li class="tu"></li>
                </ul>
                <ul class="shop">
                  <li class="tu"></li>
                  <li class="tu"></li>
                  <li class="tu"></li>
                </ul>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </van-sticky>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.container = this.$refs.container;
    //发送请求加载商品系列  get  /series
    this.axios.get("/series").then(res => {
      console.log(res);
      this.data = res.data.results;
    });
  },

  data() {
    return {
      i: 1,
      seriespros: "", //保存指定商品系列下的数据
      data: "", //保存商品系列数据
      activeKey: 0,
      container: null,
      tabPosition: "left",
    };
  },

  methods: {
    onChange(index) {
      Notify({ type: "primary", message: index });
    },
    handleClick(tab,event) {
      console.log(tab);
      console.log(event);
      // 发送请求加载 指定系列商品  post  /seriespro
      var params = `sid=${this.i}`;
      // console.log(this.seriespros);
      // console.log("params:", params);
      this.axios.post("/seriespro", params).then(res => {
        console.log(res);
        this.seriespros = res.data.results;
      });
    },
  },
};
</script>

<style lang="scss">
.ye {
  width: 100%;
}
.containerr {
  margin: 0 auto;
  width: 15.95rem;
}
.datu {
  display: inline-block;
  width: 100%;
}
.datu + h1 {
  font-size: 12px;
}
.shop {
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
}
.shop img {
  width: 4.625rem;
}
.shop .tu {
  width: 5.3163rem;
  height: 6.4281rem;
}
.datu img {
  width: 100%;
}
.el-tabs__item {
  padding: 0 10px;
  height: 3.75rem;
  line-height: 3.75rem;
}
.el-tabs__item.is-active {
  color: black;
}
.el-tabs__active-bar.is-left {
  background-color: #f44;
  height: 1.25rem !important;
}

.el-tabs--left .el-tabs__item.is-left {
  text-align: left;
}
.el-tabs--left .el-tabs__active-bar.is-left,
.el-tabs--left .el-tabs__nav-wrap.is-left::after {
  left: 0;
}

.el-tabs--left .el-tabs__active-bar.is-left,
.el-tabs--left .el-tabs__active-bar.is-right,
.el-tabs--right .el-tabs__active-bar.is-left,
.el-tabs--right .el-tabs__active-bar.is-right {
  top: 1.25rem;
  bottom: auto;
  width: 5px;
}
.el-tabs--left .el-tabs__header.is-left {
  margin: 0;
}
// .el-tabs__nav {
//   background-color: #eee;
//   height: 100%;
// }
.el-tabs--left .el-tabs__nav-wrap.is-left::after {
  height: 0;
}
</style>
